<template>
    <div>
        <el-card>
            <template #header>
                <h3>商品数据列表</h3>
            </template>
            <el-button type="primary" @click="visible = true">新增商品</el-button>

            <el-table :data="goodsList" max-height="400">
                <el-table-column prop="id" label="商品ID" />
                <el-table-column prop="goods_name" label="商品名称" />
                <el-table-column prop="goods_price" label="商品价格" />
                <el-table-column label="分类">
                    <template #default="prop">
                        <el-tag v-if="prop.row.goods_category === 1">手机</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="图片">
                    <template #default="prop">
                        <el-avatar :src="prop.row.goods_icon" />
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                :page-sizes="[3, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="onChangePage"
                @change-size="onChangeSize"
            />
        </el-card>
        <el-dialog v-model="visible">
            <el-form>
                <el-from-item lable="商品名称" prop="goods_desc">
                    <el-input v-model="goodsForm.goods_desc" />
                </el-from-item>
                <el-from-item lable="商品价格" prop="goods_price">
                    <el-input-number v-model="goodsForm.goods_price" />
                </el-from-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="saveData">保存</el-button>
                <el-button @click="visible = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="TableCom">
    import { onMounted, ref, reactive } from 'vue';
    import request from '../../utils/request';
    import { ElMessage } from 'element-plus';
    const goodsList = reactive([]);
    const getGoodsList = async () => {
        const api = `/goods/getGoodsPage?goods_category=1&currentPage=${currentPage.value}&pageSize=${pageSize.value}`
        request({
            url: api,
            method: 'GET'
        }).then(res => {
            const { code, data, message } = res
            goodsList = Object.assign(goodsList, data)
        })
    }
    onMounted(() => {
        getGoodsList()
    })

    let currentPage = ref(1)
    let pageSize = ref(3)
    let total = ref(20)
    function onChangePage(page) {
        currentPage.value = page
        getGoodsList()
    }
    function onChangeSize(size) {
        pageSize.value = size
        getGoodsList()
    }


    let visible = ref(false)
    let goodsForm = reactive({
        goods_desc: '',
        goods_price: ''
    })
    function saveData() {
        const goodObj = {...goodsForm, id: goodsList.length + 1 , goods_category: 1}
        goodsList.push(goodObj)
        goodsForm.goods_desc = ''
        goodsForm.goods_price = 0
        visible.value = false
        ElMessage.success('保存成功')
    }
</script>